var SearchForm = function () {
  var template = /* html */ `
    <div class="search-form" v-loading.fullscreen.lock="loading">
      <template v-if="dropdownData!==null">
      <el-form inline label-width="auto" size="medium">
        <el-form-item label="质检日期">
          <el-date-picker v-model="search.startTime" style="width:215px;" value-format="timestamp" :clearable="false" :editable="false"
            :picker-options="startDateOption"></el-date-picker>
          <span>-</span>
          <el-date-picker v-model="search.endTime" style="width:215px;" value-format="timestamp" :clearable="false" :editable="false"
            :picker-options="endDateOption"></el-date-picker>
        </el-form-item>
        <el-form-item label="订单编号">
          <page-select clearable filterable class="search-input" v-model="search.order" :options="orderList" value-field="orderId"
            label-field="orderId" value-key="orderId" :filter-method="filterOrder" placeholder="请选择订单编号">
            <template slot-scope="scope">
              <el-option v-for="order in scope.options" :key="order.orderId" :value="order" :label="order.orderId">
                <div style="display:flex">
                  <div style="min-width:145px">{{order.orderId}}</div>
                  <div style="min-width:145px">{{order.companyOrderId}}</div>
                  <div style="min-width:110px">{{order.factoryId}}</div>
                  <div style="min-width:50px">{{order.coustomId}}</div>
                </div>
              </el-option>
            </template>
          </page-select>
        </el-form-item>
        <el-form-item label="车间">
          <page-select clearable filterable class="search-input" v-model="search.workShopId" :options="workshopList"
            value-field="workShopId" label-field="workShopName" placeholder="请选择车间"></page-select>
        </el-form-item>
        <el-form-item label="工序">
          <page-select clearable filterable class="search-input" v-model="search.processId" :options="processList"
            value-field="processId" label-field="processName" placeholder="请选择工序"></page-select>
        </el-form-item>
        <el-form-item label="质检类型">
          <el-select clearable class="search-input" v-model="search.type" placeholder="请选择质检类型">
            <el-option v-for="reportType in reportTypeList" :key="reportType.value" :value="reportType.value" :label="reportType.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核类型">
          <el-select clearable class="search-input" v-model="search.status" placeholder="请选择审核类型">
            <el-option v-for="status in statusList" :key="status.value" :value="status.value" :label="status.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="质检结果">
          <el-select clearable class="search-input" v-model="search.result" placeholder="请选择质检结果">
            <el-option :value="1" label="OK"></el-option>
            <el-option :value="2" label="NO"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      </template>
    </div>
  `;

  return {
    mixins: [datePickerOptionsMixin('startTime', 'endTime')],

    props: {
      search: {
        type: Object,
        required: true
      },
      user: {
        type: Object
      },
      type: {
        type: String,
        default: 'approval'
      }
    },

    watch: {
      changeData: function (newObj, oldObj) {
        if (newObj.order !== oldObj.order) {
          this.workshopList = null;
          this.processList = null;
        }
        if (newObj.workShopId !== oldObj.workShopId) {
          this.orderList = null;
          this.processList = null;
        }
        if (newObj.processId !== oldObj.processId) {
          this.orderList = null;
          this.workshopList = null;
        }
        this.initDropdown();
      }
    },

    computed: {
      changeData: function () {
        var search = this.search;
        return {
          order: search.order,
          workShopId: search.workShopId,
          processId: search.processId
        };
      }
    },

    data: function () {
      return {
        loading: false,
        dropdownData: null,
        orderList: null,
        workshopList: null,
        processList: null,
        createUserList:[],
        filterParams: ['orderId', 'companyOrderId', 'factoryId', 'customerId'],
        reportTypeList: i18n.getDropDown('productMgr.qcReport.type', [1, 2, 3]),
        statusList: i18n.getDropDown('productMgr.qcReport.status', [0, 1, 2])
      };
    },

    created: function () {
      var promiseList = [this.setDropdownData()];
      // if (this.type === 'approval') {
      //   promiseList.push(this.setCreateUserList());
      // }

      this.loading = true;
      var self = this;
      Promise.all(promiseList).then(function(){
        self.loading = false;
      }).catch(function(){
        self.loading = false;
      });
    },

    methods: {
      setDropdownData: function () {
        var postData = {
          type: 30
        };
        if (this.type === 'my') {
          var user = this.user;
          postData.createUser = user.userId;
        }

        var self = this;
        return ajaxRequest('materialSelectFilter/getMaterialSelectData', postData).then(function (dropdownData) {
          var fields = ['orderId', 'companyOrderId', 'factoryId', 'customerId', 'workShopId', 'workShopName', 'processId', 'processName'];
          dropdownData = _.map(dropdownData, function (data) {
            var obj = {};
            for (var i = 0; i < fields.length; i++) {
              var field = fields[i];
              obj[field] = data[field];
            }
            return obj;
          });
          self.dropdownData = dropdownData;
          self.initDropdown();
          return dropdownData;
        });
      },

      setCreateUserList:function(){

      },

      initDropdown: function () {
        this.setOrderList();
        this.setWorkshopList();
        this.setProcessList();
      },

      filterOrder: function (options, queryValue) {
        if (queryValue === '') {
          return options;
        }

        queryValue = queryValue.toLowerCase();
        var filterParams = this.filterParams;
        options = _.filter(options, function (option) {
          for (var i = 0; i < filterParams.length; i++) {
            var filterParam = filterParams[i];
            var value = _.get(option, filterParam, '');
            if (value === null) {
              value = '';
            }
            if (typeof value === 'string') {
              value = value.toLowerCase();
            }
            if (value.indexOf(queryValue) !== -1) {
              return true;
            }
          }
          return false;
        });
        return options;
      },

      setOrderList: function () {
        if (this.orderList !== null) {
          return;
        }

        var orderList = this.getFilterProgressList('order');
        orderList = _.uniqBy(orderList, 'orderId');
        this.orderList = orderList;
      },

      setWorkshopList: function () {
        if (this.workshopList !== null) {
          return;
        }

        var workshopList = this.getFilterProgressList('workShopId');
        workshopList = _.uniqBy(workshopList, 'workShopId');
        this.workshopList = workshopList;
      },

      setProcessList: function () {
        if (this.processList !== null) {
          return;
        }

        var processList = this.getFilterProgressList('processId');
        processList = _.uniqBy(processList, 'processId');
        this.processList = processList;
      },

      getFilterProgressList: function (field) {
        var dropdownData = this.dropdownData;
        if (SysUtil.isEmpty(dropdownData)) {
          return [];
        }

        var filterField = [];
        switch (field) {
          case 'order':
            filterField = ['workShopId', 'processId'];
            break;
          case 'workShopId':
            filterField = ['order', 'processId'];
            break;
          case 'processId':
            filterField = ['order', 'workShopId'];
            break;
        }

        var search = this.search;
        var filterObj = {};
        for (var i = 0; i < filterField.length; i++) {
          var fieldValue = filterField[i];
          var value = search[fieldValue];
          if (value === '') {
            continue;
          }
          if (fieldValue === 'order') {
            filterObj.orderId = value.orderId;
          } else {
            filterObj[fieldValue] = value;
          }
        }

        if (SysUtil.isEmptyObjct(filterObj)) {
          return dropdownData;
        }
        dropdownData = _.filter(dropdownData, filterObj);
        return dropdownData;
      }
    },

    components: {
      PageSelect: PageSelect
    },

    template: template
  };
}();
